<template>
  <div>
    <h2>销售总量</h2>
    <div class="chart" id="oneChart">
      图表的容器
    </div>
  </div>
</template>

<script>
import { inject, onMounted, reactive } from 'vue'

export default {
  setup () {
    const $echarts = inject('echarts')
    const $http = inject('axios')

    const data = reactive({})
    const xdata = reactive([])
    const ydata = reactive([])
    function setData() {
      xdata.value = data.value.data.chartData.chartData.map(v => v.title)
      ydata.value = data.value.data.chartData.chartData.map(v => v.num)
    }

    async function getState() {
      data.value = await $http({
        url: '/one/data'
      })
    }

    onMounted(() => {
      const myChart = $echarts.init(document.getElementById('oneChart'))
      getState().then(() => {
        setData()
        myChart.setOption({
          grid: {
            top: '3%',
            left: '1%',
            right: '6%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            }
          },
          yAxis: {
            type: 'category',
            data: xdata.value,
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            }
          },
          series: [
            {
              data: ydata.value,
              type: 'bar',
              itemStyle: {
                normal: {
                  barBorderRadius: [0, 20, 20, 0],
                  color: new $echarts.graphic.LinearGradient(0, 0, 1, 0, 
                  [
                    {
                      offset: 0,
                      color: '#005eaa'
                    },
                    {
                      offset: 0.5,
                      color: '#339ca8'
                    },
                    {
                      offset: 1,
                      color: '#cda819'
                    }
                  ])
                }
              }
            }
          ]
        })
      })
    })

    return {
      getState,
      data,
      xdata,
      ydata,
      setData
    }
  }
}
</script>

<style scoped>
.chart{
  height: 4.5rem;
}
h2{
  height: .6rem;
  color: #fff;
  line-height: .6rem;
  font-size: .25rem;
  text-align: center;
}
</style>
